<template>
	<view class="idCard">
		<view class="f36 fb">
			上传身份证照片
		</view>
		<view class="f24 c3d mt18">
			请确保证件边框完整，字体清晰，亮度均匀
		</view>
		<view class="imgs">
			<view class="">
				<view class="mt32">
					<view class="grid grid-square flex-sub">
						<view class="bg-img border" v-if="form.business_image">
							<image :src="$wanlshop.oss(form.business_image)" mode="aspectFill"
								@click="previewImage(-1)">
							</image>
							<view class="cu-tag bg-red" @tap.stop="delImg('business_image',-1)"><text
									class="wlIcon-31guanbi"></text>
							</view>
						</view>

						<view v-else class="bg-img dashed border bg-img1" @tap="chooseImage('business_image',1)">

						</view>
					</view>
				</view>
				<view class="mt32">
					<view class="grid grid-square flex-sub">
						<view class="bg-img border" v-if="form.file_images">
							<image :src="$wanlshop.oss(form.file_images)" mode="aspectFill" @click="previewImage(-1)">
							</image>
							<view class="cu-tag bg-red" @tap.stop="delImg('file_images',-1)"><text
									class="wlIcon-31guanbi"></text>
							</view>
						</view>

						<view v-else class="bg-img dashed border bg-img2" @tap="chooseImage('file_images',1)">

						</view>
					</view>
				</view>
			</view>
			<view class="imgs mt264">

				<view class="flex_ac">
					<image style="width: 32rpx;height: 32rpx;" src="https://img.aibbyp.com/wechatUser/bh.png" mode="">
					</image>

					<view class="ml12 info f24">
						好饰乐居对信息加密，实时保障信息安全
					</view>
				</view>
				<view class="xyb" @click="btnxyb">
					下一步
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					file_images: null,
					business_image: null
				}
			}
		},
		onLoad() {},
		onShow() {
			this.getAuth()
		},
		methods: {
			getAuth() {
				this.$api.post({
					url: '/worker/user/getAuth',
				}).then(res => {
					console.log(res);
					this.form.business_image = res.id_card_image
					this.form.file_images = res.id_card_image_back
					//状态:status0=待审核,1=审核通过,2=审核未通过
				})
			},
			chooseImage(key, key1) { //选择图片
				console.log('--')
				let that = this
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: key1,
					success: res => {
						uni.showLoading({
							title: '上传中...'
						})
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													if (key ==
														'file_images') {
														this.form
															.file_images =
															data.url
													}
													if (key ==
														'business_image') {
														this.form
															.business_image =
															data.url

													}


													uni.hideLoading()
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},
			delImg(type, k) {
				if (type == 'business_image') {
					this.form.business_image = null
					return
				}
				if (type == 'file_images') {
					this.form.file_images = null
					return
				}
			},
			btnxyb() {
				if (this.form.business_image && this.form.file_images) {
					this.$api.post({
						url: '/worker/user/id_card_set',
						data: {
							id_card_image: this.form.business_image,
							id_card_image_back: this.form.file_images,
						},
						success: res => {
							uni.navigateTo({
								url: '/pages/craftsman/craftsmanAdd?type=1'
							})
						}
					})

				} else {

					uni.showToast({
						icon: 'none',
						title: '请上传身份证照片'
					})
					return
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.idCard {
		padding: 50rpx 36rpx 0;
		background: #fff;
		min-height: 100vh;
	}

	.imgs {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bg-img {

		width: 514rpx;
		height: 330rpx;

	}

	.xyb {
		width: 568rpx;
		height: 80rpx;
		background: #FD5241;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		margin-top: 32rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.bg-img1 {
		background-image: url('https://img.aibbyp.com/wechatUser/idCardz.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.bg-img2 {
		background-image: url('https://img.aibbyp.com/wechatUser/idCardf.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>